<!-- 能管办公管理-能耗数据报表查询 -->
<script setup lang="ts">
import { ElButton } from 'element-plus'
import { View } from '@element-plus/icons-vue'
import { SearchForm } from './components'
import { comObj, defaultPagingParams } from './index'
import type {
  EnterpriseMonthReportQueryAllListResult,
  TableColumn,
} from '@/types'
import { queryList } from '@/api/modules/enterpriseMonthReport'
// ------------------use------------------
// #region
const { withLoading, loading } = useDefineLoading()
const [tableData, setTableData] = useState<
  EnterpriseMonthReportQueryAllListResult[]
>([])
const [total, setTotal] = useState<number>(0)
const [isDetail, setIsDetail] = useState<boolean>(false)
const [currentData, setCurrentData]
  = useState<EnterpriseMonthReportQueryAllListResult>(
    {} as any,
  )
// #endregion
// ------------------静态变量------------------
// #region
const columns: TableColumn<EnterpriseMonthReportQueryAllListResult>[]
  = [
    {
      key: uuid(),
      type: 'index',
      width: '80',
      label: '序号',
    },
    {
      key: uuid(),
      label: '报表名称',
      prop: 'formName',
      render({ row }) {
        return h(
          ElButton,
          {
            link: true,
            type: 'primary',
            onClick() {
              // setIsDetail(true);
              // setCurrentData(row);
              showDetailDialog(row)
            },
          },
          {
            default: () => row.formName,
          },
        )
      },
    },
    {
      key: uuid(),
      label: '时间',
      prop: 'dataTime',
    },
    {
      key: uuid(),
      label: '填报公司',
      prop: 'tenantName',
    },
  ]
// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
const pagingParams = ref({
  ...defaultPagingParams,
})
// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region
// #endregion
// ------------------生命周期------------------
// #region
onMounted(() => {
  getTableData()
})
// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region
async function getTableData() {
  const { data: res } = await withLoading(queryList)(
    pagingParams.value,
  )
  if (!res) {
    setTotal(0)
    setTableData([])
    return
  }
  setTotal(res.total)
  setTableData(res.records)
}
async function clickBack() {
  setIsDetail(false)
}

function showDetailDialog(row: EnterpriseMonthReportQueryAllListResult) {
  setIsDetail(true)
  setCurrentData(row)
}
// #endregion
</script>

<template>
  <div
    class="padding-sm flex-direction relative flex align-end container"
  >
    <view-table
      :loading="loading"
      :columns="columns"
      :data="tableData"
      :show-toolbox="false"
    >
      <template #actions>
        <SearchForm
          v-model="pagingParams"
          @search="getTableData"
          @reset="getTableData"
        />
      </template>
      <template #operate="{ row }">
        <TdButton
          title="查看"
          :icon="View"
          :disabled="!$power('view')"
          type="primary"
          @click="showDetailDialog(row)"
        />
      </template>
    </view-table>

    <!-- 分页 -->
    <ListsPagination
      v-model:page-num="pagingParams.pageNumber"
      v-model:page-size="pagingParams.pageSize"
      :total="total"
      @current-change="getTableData"
      @size-change="getTableData"
    />
    <FullscreenModal v-model="isDetail">
      <component
        :is="comObj[currentData.type]?.render?.()"
        :data-time="currentData.dataTime"
        preview
      >
        <template #title="{ download, time }">
          <ElPageHeader title="返回" @back="clickBack">
            <template #content>
              <span>
                {{
                  (time as string).replace(
                    /^(\d+)-(\d+)$/g,
                    '$1年$2月份',
                  )
                }}天飞有限责任有限公司电量（费）核减情况表
              </span>
            </template>
            <template #extra>
              <div class="align-center flex">
                <ElButton type="primary" @click="download">
                  导出文件
                </ElButton>
              </div>
            </template>
          </ElPageHeader>
        </template>
      </component>
    </FullscreenModal>
  </div>
</template>

<style lang="scss" scoped>
.report-details {
  position: absolute;
  inset: 0px;
  z-index: 99;
  background-color: var(--el-bg-color-overlay);
}
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
